<template>
  <div class="tutorial">
    <h2>🖼️ 幻灯片（滑动）过渡动画教程</h2>
    <p>通过位移与透明度实现左右滑入滑出效果。</p>

    <div class="controls">
      <button class="btn" @click="direction = 'left'">从左滑入</button>
      <button class="btn" @click="direction = 'right'">从右滑入</button>
      <button class="btn" @click="show = !show">{{ show ? '隐藏' : '显示' }}示例</button>
    </div>

    <transition :name="direction === 'left' ? 'slide-left' : 'slide-right'">
      <div v-if="show" class="demo-box">幻灯片示例区域</div>
    </transition>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(true)
const direction = ref('left')
</script>

<style scoped>
.tutorial { padding: 20px; }
.controls { display:flex; gap:8px; }
.btn { padding:8px 12px; background:#10b981; color:#fff; border:none; border-radius:6px; cursor:pointer; }
.btn:hover { background:#059669; }
.demo-box { margin-top:12px; padding:20px; border-radius:12px; background:#ecfeff; border:1px solid #a7f3d0; }

/* 左滑动 */
.slide-left-enter-active, .slide-left-leave-active { transition: all .35s ease; }
.slide-left-enter-from { transform: translateX(-60px); opacity: 0; }
.slide-left-enter-to   { transform: translateX(0); opacity: 1; }
.slide-left-leave-from { transform: translateX(0); opacity: 1; }
.slide-left-leave-to   { transform: translateX(60px); opacity: 0; }

/* 右滑动 */
.slide-right-enter-active, .slide-right-leave-active { transition: all .35s ease; }
.slide-right-enter-from { transform: translateX(60px); opacity: 0; }
.slide-right-enter-to   { transform: translateX(0); opacity: 1; }
.slide-right-leave-from { transform: translateX(0); opacity: 1; }
.slide-right-leave-to   { transform: translateX(-60px); opacity: 0; }
</style>